<template>
  <v-app>
    <GoBackTopbar
      title="地址管理"
      :backTo="fromAddressesAdd ? '/fillOrder' : ''"
    />
    <v-content class="grey lighten-3">
      <AddressInfo
        class="mb-4"
        v-for="item in addressInfos"
        :key="item.id"
        :data="item"
        @onUpdateAddressInfo="refresh"
      />
      <Bottombar />
      <v-overlay :value="showOverlay">
        <v-progress-circular indeterminate size="64"></v-progress-circular>
      </v-overlay>
    </v-content>
  </v-app>
</template>

<script>
import GoBackTopbar from '@/components/GoBackTopbar.vue';
import AddressInfo from './components/AddressInfo.vue';
import Bottombar from './components/Bottombar.vue';
import request from '@/request/index';

export default {
  name: 'address-management',
  components: { GoBackTopbar, AddressInfo, Bottombar },
  data() {
    return {
      addressInfos: [],
      showOverlay: false,
      fromAddressesAdd: false
    };
  },
  beforeRouteEnter(to, from, next) {
    console.log(from);
    next(vm => {
      vm.fromAddressesAdd = from.path === '/addresses/form';
    });
  },
  mounted() {
    this.refresh();
  },
  methods: {
    refresh() {
      this.showOverlay = true;
      this.$store.dispatch('getDefaultReceiveAddress');
      request
        .get('/userReceiveAddress', {
          appUserId: this.$store.state.currentUser.id
        })
        .then(resp => {
          this.addressInfos = resp;
          this.showOverlay = false;
        });
    }
  }
};
</script>
